<template>
  <div class="outside">
    <el-menu active-text-color="#111" :default-active="activePath" :router='true'
    >
      <el-menu-item index="/discover">
        <span slot="title">发现音乐</span>
      </el-menu-item>
      <el-menu-item index="/video">
        <span slot="title">视频</span>
      </el-menu-item>
      <el-menu-item index="/friend">
        <span slot="title">朋友</span>
      </el-menu-item>
      <el-menu-item index="/broadcast">
        <span slot="title">直播</span>
      </el-menu-item>
      <el-menu-item index="/private">
        <span slot="title">私人FM</span>
      </el-menu-item>
      <div class="group">我的音乐</div>
      <el-menu-item index="6">
        <span slot="title" style="font-size:14px"><i class="iconfont icon-yinyue-copy"></i>本地音乐</span>
      </el-menu-item>
      <el-menu-item index="7">
        <span slot="title" style="font-size:14px"><i class="iconfont icon-xiazai" ></i>下载管理</span>
      </el-menu-item>
      <el-menu-item index="/recentplay">
        <span slot="title" style="font-size:14px"><i class="iconfont icon-zuijinbofang" ></i>最近播放</span>
      </el-menu-item>
      <div class="group" @click="isActive" >创建的歌单
        <i class="iconfont icon-htmal5icon03" v-show="!isactive" ></i>
        <i class="iconfont icon-youjiantou" v-show='isactive'></i>
        <i class="iconfont icon-jiahao"></i>
      </div>
      <div v-show='!isactive' class="myLike">
        <i class="iconfont icon-shoucang1"></i>我喜欢的音乐
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name:'appAside',
  data(){
    return{
      isactive:true,
      activePath:''
    }
  },
  computed:{
    path(){
      let str = this.$route.path
      return this.getPath(str)
    }
  },
  methods:{
    isActive(){
      this.isactive = !this.isactive
    },
    getPath(str){
      var text = str
      var index = text.lastIndexOf('\/')
      var name= text.substring(index)
      var path = text.replace(`${name}`,'')
      if( path.indexOf( 'playlist') !== -1 || path.indexOf('latestmusic') !== -1){
        path =  this.getPath(path)
      }
      return path
    }
  },
  watch:{
    '$route'(){
      this.activePath = this.path
    }
  },
}
</script>

<style scoped>
.group{
  color:rgb(153,153,153);
  font-size: 12px;
  padding:15px 0 4px 23px;
  cursor:pointer;
  position: relative;
}
.el-menu-item i{
  color:rgb(89,89,89);
  padding-right: 8px;
}
.el-menu{
  margin-top: 10px;
  border: 0;
}
.el-menu-item{
  padding-left: 9px !important;
  /* padding-bottom: 8px; */
  /* vertical-align: middle; */
  display: flex;
  align-items: center;
  margin: 2px 0 0 10px;
  width: 93%;
  line-height: 35px;
  height: 35px;
  border-radius: 2px;
  font-size: 15px;
  color: rgb(76,76,76);

}
.el-menu-item:focus, .el-menu-item:hover {
  background-color: rgb(246,246,247);
  font-size: 16px;
  font-weight: bold;
  
}
.icon-htmal5icon03,.icon-youjianyou{
  font-size: 12px;
}
.icon-youjiantou::before{
  font-size: 12px;
}
.icon-jiahao{
  color:#111;
  position:absolute;
  right:12px;
  top:50%;
  font-size:13px
}
.myLike{
  font-size:14px;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  cursor: default;
}
.myLike i{
  margin-right: 8px;
}
</style>